<template>
  <div class="card-edit-right-panel">
    <!-- itemid 不可编辑 -->
    <p style="margin-bottom: 20px; border-bottom: 10px solid #f3f5fa;">
      <InputNormal label="Item ID" :modelValue="curPanelTarget.itemId"></InputNormal>
    </p>

    <template :key="curPanelTarget.itemId + '_' + curSelectPanelIndex + '_' + itemKey" v-for="(item, itemKey) in panelEditableParams">
      <EditableParam
        v-if=" itemKey != 'Idx_visible' "
        :compId="curPanelTargetItem.Idx_name"
        :paramItem="item"
        :paramKey="itemKey"
        :paramVal="panelLists[curSelectPanelIndex][itemKey]"
        :parentKeys="[]"
        :parentVal="panelLists[curSelectPanelIndex]"
        :original="panelLists[curSelectPanelIndex]"
        :editableParamsLists="PanelDatasEditableParamsLists"
        :editableParamsLists4Add="null"
        :type="curSelectPanelType"
        @change="val => onPanelChange(val)">
      </EditableParam>
    </template>
  </div>
</template>

<script>
  // panel
  import EditNormalComponentsGather from '@/views/card/js/mixins/edit-normal-components-gather';
  import { PanelDatasEditableParamsLists } from '@/views/card/js/data/panelDatas';
  import PanelCommonComputed from '@/views/card/js/mixins/panel-common-computed';
  import { defineAsyncComponent } from 'vue';
  export default {
    name: 'CardEditRight4Panel',
    mixins: [PanelCommonComputed, EditNormalComponentsGather],
    data() {
      return {
        /* editable params */
        PanelDatasEditableParamsLists: PanelDatasEditableParamsLists,
      }
    },
    components: {
      'EditableParam': defineAsyncComponent(() => import('@/views/card/components/recursion/EditableParam.vue')),
    },
    methods: {
      /* panel update */
      onPanelChange(val) {
        let _newPanelLists = _.cloneDeep(this.panelLists);
        _newPanelLists[this.curSelectPanelIndex] = val;
        this.updatePanelLists(_newPanelLists);
      },
    },
  }
</script>

<style lang="scss"></style>
